<template>
    <div class="industry-analysis-title"></div>
    <div class="industry-box">
        <div class="left">
            <div class="box">
                <img src="../../../assets/icon6.png" alt="">
                <e-charts id="echarts" ref="chart" :option="dataOption"></e-charts>
            </div>
        </div>
        <div class="right">
            <div class="item">
                <div class="i-left">
                    <div class="ik1"></div>
                    <span>基层法律工作者</span>
                </div>
                <div class="i-right">21%</div>
            </div>
            <div class="item">
                <div class="i-left">
                    <div class="ik2"></div>
                    <span>个体</span>
                </div>
                <div class="i-right">12%</div>
            </div>
            <div class="item">
                <div class="i-left">
                    <div class="ik3"></div>
                    <span>企业</span>
                </div>
                <div class="i-right">12%</div>
            </div>
            <div class="item">
                <div class="i-left">
                    <div class="ik4"></div>
                    <span>社区工作者</span>
                </div>
                <div class="i-right">54%</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
// 配置项
let dataOption = ref({});
// 初始化echarts
function initEcharts() {
    dataOption.value = {
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                padAngle: 5,
                itemStyle: {
                    borderRadius: 1
                },
                label: {
                    show: false,
                    position: 'center'
                },
                labelLine: {
                    show: false
                },
                data: [
                    {
                        value: 21, name: 'Email', itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 1, 1,
                                [
                                    { offset: 0, color: 'rgba(13, 196, 242, 0.1)' },
                                    { offset: 1, color: 'rgba(13, 196, 242, 1)' },
                                ]
                            )
                        }
                    },
                    {
                        value: 56, name: 'Union Ads', itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 1, 1,
                                [
                                    { offset: 0, color: 'rgba(17, 116, 229, 0.1)' },
                                    { offset: 1, color: 'rgba(17, 116, 229, 1)' },
                                ]
                            )
                        }
                    },
                    {
                        value: 12, name: 'Search Engine', itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 1, 1,
                                [
                                    { offset: 0, color: 'rgba(211, 115, 72, 0.1)' },
                                    { offset: 1, color: 'rgba(211, 115, 72, 1)' },
                                ]
                            )
                        }
                    },


                    {
                        value: 12, name: 'Direct', itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 1, 1,
                                [
                                    { offset: 0, color: 'rgba(189, 204, 223, 0.1)' },
                                    { offset: 1, color: 'rgba(189, 204, 223, 1)' },
                                ]
                            )
                        }
                    },
                ]
            }
        ]
    }
}
onMounted(() => {
    initEcharts();
});
</script>

<style lang="less" scoped>
.industry-analysis-title {
    width: 100%;
    height: 36px;
    margin-top: 9px;
    background-image: url("../../../assets/icon1.png");
    background-size: 100% 100%;
}

.industry-box {
    width: 100%;
    height: 181px;
    box-sizing: border-box;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url('../../../assets/icon8.png');
    background-size: 100% 100%;
    margin-top: 9px;

    .left {
        width: 178px;
        height: 178px;
        display: flex;
        align-items: center;
        background-image: url('../../../assets/icon7.png');
        background-size: 100% 100%;

        .box {
            width: 178px;
            height: 178px;
            position: relative;

            img {
                width: 85px;
                height: 86px;
                position: absolute;
                left: calc(50% - 42.5px);
                top: calc(50% - 43px);
            }

            #echarts {
                width: 200px;
                height: 200px;
                position: absolute;
                left: -11px;
                top: -11px;
            }
        }
    }

    .right {
        width: 100%;
        margin-left: 40px;

        .item {
            width: 100%;
            height: 30px;
            background-image: url('../../../assets/icon11.png');
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 7px 0;

            .i-left {
                display: flex;
                align-items: center;

                .ik1 {
                    width: 8px;
                    height: 8px;
                    background: #1799FD;
                }

                .ik2 {
                    width: 8px;
                    height: 8px;
                    background: #5DDEF6;
                }

                .ik3 {
                    width: 8px;
                    height: 8px;
                    background: #FD7735;
                }

                .ik4 {
                    width: 8px;
                    height: 8px;
                    background: #D0DEEF;
                }

                span {
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    font-size: 12.88px;
                    color: #FFFFFF;
                    margin-left: 11px;
                }
            }

            .i-right {
                font-family: AlimamaShuHeiTi-Bold;
                font-weight: 700;
                font-size: 12.88px;
                color: #FFFFFF;
            }
        }
    }
}
</style>